
<template>
  <div>
    <SearchForm :search-list="searchList" :search-params="searchParams"></SearchForm>
    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-handle">
          <vue-json-excel
              :data="tableData2"
              :fields="excelFields"
              name="统计报表.xls"
              type="xls"
          >
            <el-button type="primary" size="mini" icon="el-icon-refresh">导出</el-button>
          </vue-json-excel>
        </div>
        <div class="table-box">
          <el-table
              border
              ref="table"
              show-summary
              :max-height="420"
              v-loading="loading"
              :data="tableData"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column prop="date" label="日期" width="120px" fixed="left"></el-table-column>
            <el-table-column min-width="140px" align="center" v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
            <span v-if="item.type === 'select'">
              {{ item.mapping[scope.row[item.prop]] }}
            </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
              background
              :current-page="pageNo"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
              @size-change="changePageSize"
              @current-change="changePageNo"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import crud from "@/mixins/crud";
import VueJsonExcel from 'vue-json-excel'
export default {
  name: "index",
  mixins: [crud],
  components: {
    VueJsonExcel
  },
  data() {
    return {
      searchList: [
        {
          label: '日期',
          prop: 'timeDate',
          name: 'date',
          dateType: 'datetimerange',
        }
      ],
      searchParams: {
        timeDate: []
      },
      columns: [
        // 日期、可用余额、冻结余额、待结算余额、充值金额、代收订单总数、代收成功订单数、代收成功率、代收总金额、代收成功金额、代收手续费、代收件均金额、代付订单总数、代付成功订单数、代付成功率、代付总金额、代付成功金额、代付手续费、代付件均金额、代付退款单数、代付退款订单金额、代付退款手续费、提现订单总数、提现成功订单数、提现总金额、提现成功金额、提现手续费
          // 投诉订单数、投诉订单金额、投诉率、代付处理中单数、代付处理中金额、代付处理中手续费、提现处理中单数、提现处理中金额、提现处理中手续费
        { prop: "availableBalance", label: "可用余额" },
        { prop: "freezeBalance", label: "冻结余额" },
        { prop: "waitSettleBalance", label: "待结算余额" },
        { prop: "rechargeAmount", label: "充值金额" },
        { prop: "collectOrderTotal", label: "代收订单总数" },
        { prop: "collectOrderSuccess", label: "代收成功订单数" },
        { prop: "collectOrderSuccessRate", label: "代收成功率" },
        { prop: "collectOrderTotalAmount", label: "代收总金额" },
        { prop: "collectOrderSuccessAmount", label: "代收成功金额" },
        { prop: "collectOrderFee", label: "代收手续费" },
        { prop: "collectOrderAvgAmount", label: "代收件均金额" },
        { prop: "payOrderTotal", label: "代付订单总数" },
        { prop: "payOrderSuccess", label: "代付成功订单数" },
        { prop: "payOrderSuccessRate", label: "代付成功率" },
        { prop: "payOrderTotalAmount", label: "代付总金额" },
        { prop: "payOrderSuccessAmount", label: "代付成功金额" },
        { prop: "payOrderFee", label: "代付手续费" },
        { prop: "payOrderAvgAmount", label: "代付件均金额" },
        { prop: "payOrderRefundTotal", label: "代付退款单数" },
        { prop: "payOrderRefundAmount", label: "代付退款订单金额" },
        { prop: "payOrderRefundFee", label: "代付退款手续费" },
        { prop: "withdrawOrderTotal", label: "提现订单总数" },
        { prop: "withdrawOrderSuccess", label: "提现成功订单数" },
        { prop: "withdrawOrderTotalAmount", label: "提现总金额" },
        { prop: "withdrawOrderSuccessAmount", label: "提现成功金额" },
        { prop: "withdrawOrderFee", label: "提现手续费" },
        { prop: "complaintOrderTotal", label: "投诉订单数" },
        { prop: "complaintOrderAmount", label: "投诉订单金额" },
        { prop: "complaintOrderRate", label: "投诉率" },
        { prop: "payOrderProcessingTotal", label: "代付处理中单数" },
        { prop: "payOrderProcessingAmount", label: "代付处理中金额" },
        { prop: "payOrderProcessingFee", label: "代付处理中手续费" },
        { prop: "withdrawOrderProcessingTotal", label: "提现处理中单数" },
        { prop: "withdrawOrderProcessingAmount", label: "提现处理中金额" },
        { prop: "withdrawOrderProcessingFee", label: "提现处理中手续费" }
      ],
      tableData: [
        {
          date: '2021-01-01',
          availableBalance: 100,
          freezeBalance: 100,
          waitSettleBalance: 100,
          rechargeAmount: 100,
          collectOrderTotal: 100,
          collectOrderSuccess: 100,
          collectOrderSuccessRate: 100,
          collectOrderTotalAmount: 100,
          collectOrderSuccessAmount: 100,
          collectOrderFee: 100,
          collectOrderAvgAmount: 100,
          payOrderTotal: 100,
          payOrderSuccess: 100,
          payOrderSuccessRate: 100,
          payOrderTotalAmount: 100,
          payOrderSuccessAmount: 100,
          payOrderFee: 100,
          payOrderAvgAmount: 100,
          payOrderRefundTotal: 100,
          payOrderRefundAmount: 100,
          payOrderRefundFee: 100,
          withdrawOrderTotal: 100,
          withdrawOrderSuccess: 100,
          withdrawOrderTotalAmount: 100,
          withdrawOrderSuccessAmount: 100,
          withdrawOrderFee: 100,
          complaintOrderTotal: 100,
          complaintOrderAmount: 100,
          complaintOrderRate: 100,
          payOrderProcessingTotal: 100,
          payOrderProcessingAmount: 100,
          payOrderProcessingFee: 100,
          withdrawOrderProcessingTotal: 100,
          withdrawOrderProcessingAmount: 100,
          withdrawOrderProcessingFee: 100
        },
        {
          date: '2021-01-01',
          availableBalance: 100,
          freezeBalance: 100,
          waitSettleBalance: 100,
          rechargeAmount: 100,
          collectOrderTotal: 100,
          collectOrderSuccess: 100,
          collectOrderSuccessRate: 100,
          collectOrderTotalAmount: 100,
          collectOrderSuccessAmount: 100,
          collectOrderFee: 100,
          collectOrderAvgAmount: 100,
          payOrderTotal: 100,
          payOrderSuccess: 100,
          payOrderSuccessRate: 100,
          payOrderTotalAmount: 100,
          payOrderSuccessAmount: 100,
          payOrderFee: 100,
          payOrderAvgAmount: 100,
          payOrderRefundTotal: 100,
          payOrderRefundAmount: 100,
          payOrderRefundFee: 100,
          withdrawOrderTotal: 100,
          withdrawOrderSuccess: 100,
          withdrawOrderTotalAmount: 100,
          withdrawOrderSuccessAmount: 100,
          withdrawOrderFee: 100,
          complaintOrderTotal: 100,
          complaintOrderAmount: 100,
          complaintOrderRate: 100,
          payOrderProcessingTotal: 100,
          payOrderProcessingAmount: 100,
          payOrderProcessingFee: 100,
          withdrawOrderProcessingTotal: 100,
          withdrawOrderProcessingAmount: 100,
          withdrawOrderProcessingFee: 100
        },
      ],
    }
  },
  computed: {
    excelFields() {
      let map = {
        date: '日期'
      }
      this.columns.forEach(item => {
        map[item.label] = item.prop
      })
      return map
    },
    tableData2() {
      let total = {}
      this.tableData.forEach(item => {
        for (let key in item) {
          if (key === 'date') {
            continue
          }
          if (total[key]) {
            total[key] += item[key]
          } else {
            total[key] = item[key]
          }
        }
      })
      total.date = '合计'
      console.log(this.tableData.concat(total))
      return this.tableData.concat(total)
    }
  },
  methods: {
    onExport() {
      // 前端导出表格
      this.$refs.table.exportCsv({
        filename: '统计报表'
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
